<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>拜访记录统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/resources/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/resources/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/resources/css/public.css" media="all">
</head>
<body style="height: 100%; margin: 0" >
<blockquote class="layui-elem-quote" style="height: 30px">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="startTime" readonly name="startTime" placeholder="请输入开始时间" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="endTime" readonly name="endTime" placeholder="请输入结束时间" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button"  class="layui-btn" lay-submit id="doSearch" lay-filter="doSearch">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button id="resetSearch" type="reset"  class="layui-btn layui-btn-danger">
                    <i class="layui-icon layui-icon-refresh-3"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
</blockquote>
<div id="container" style="height: 80%">

</div>
<script src="/resources/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/resources/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['layer', 'jquery', 'form','laydate','echarts'], function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;
        let laydate = layui.laydate;
        let  echarts = layui.echarts;
        laydate.render({
            elem:"#startTime",
            type:"datetime"
        })
        laydate.render({
            elem:"#endTime",
            type:"datetime"
        })

        //查询按钮绑定事件
            form.on("submit(doSearch)", function (obj) {
                let data = obj.field;
                $.get("/stat/statVisitCount.do",data,function (res) {
                    if (res.code==0){
                        render(res.data)
                    }else {
                        layer.msg(res.msg)
                    }
                })
                return false;
            })
        function render(data) {
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            var option;

            option = {
                title: {
                    text: '业务员拜访记录统计表',
                    subtext: 'CRM',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.name,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'visitLog',
                        type: 'bar',
                        barWidth: '60%',
                        data: data.value
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        }
        $("#doSearch").click()
    })
</script>
</body >
</html>
